<template>
  <div class="login-page">
    <div class="login-container">
      <div class="login-header">
        <div class="logo">
          <img src="@/assets/images/logo.svg" alt="ClassPrepHub Logo" />
        </div>
        <p class="welcome-text">欢迎回来，请登录您的账号</p>
      </div>

      <div class="login-form-container">
        <el-form @submit.prevent="login" class="login-form">
          <el-form-item>
            <el-input v-model="username" placeholder="用户名" prefix-icon="User" size="large" />
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="password"
              placeholder="密码"
              show-password
              prefix-icon="Lock"
              size="large"
            />
          </el-form-item>

          <div class="remember-forgot">
            <el-checkbox v-model="rememberMe">记住我</el-checkbox>
            <a href="#" class="forgot-link">忘记密码?</a>
          </div>

          <el-form-item>
            <el-button
              type="primary"
              :loading="isLoading"
              @click="login"
              class="login-button"
              size="large"
            >
              {{ isLoading ? '登录中...' : '登 录' }}
            </el-button>
          </el-form-item>

          <div class="error-message" v-if="error">
            <el-alert :title="error" type="error" show-icon />
          </div>
        </el-form>

        <div class="login-divider">
          <span>或者使用</span>
        </div>

        <div class="social-login">
          <el-button class="social-btn wechat"
            ><el-icon class="social-icon"><i class="fab fa-weixin"></i></el-icon
          ></el-button>
          <el-button class="social-btn qq"
            ><el-icon class="social-icon"><i class="fab fa-qq"></i></el-icon
          ></el-button>
          <el-button class="social-btn weibo"
            ><el-icon class="social-icon"><i class="fab fa-weibo"></i></el-icon
          ></el-button>
        </div>
      </div>

      <div class="register-link">
        还没有账号? <router-link to="/register">立即注册</router-link>
      </div>
    </div>

    <div class="login-background">
      <div class="illustration">
        <img src="@/assets/images/login-illustration.svg" alt="教育插图" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import UserApi from '@/apis/Userapi'
const router = useRouter()
const username = ref('')
const password = ref('')
const error = ref('')
const isLoading = ref(false)
const rememberMe = ref(false)

// 加载字体图标
const loadFontAwesome = () => {
  const link = document.createElement('link')
  link.rel = 'stylesheet'
  link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'
  document.head.appendChild(link)
}

// 在组件挂载时加载字体图标
loadFontAwesome()

const login = async () => {
  try {
    if (!username.value || !password.value) {
      error.value = '请输入用户名和密码'
      return
    }

    isLoading.value = true
    error.value = ''

    // 模拟登录请求
    // await new Promise((resolve) => setTimeout(resolve, 1000))

    // 假设这里会调用API进行登录验证
    // const response = await loginApi(username.value, password.value)
    const response: any = await UserApi.login({
      username: username.value,
      passwordHash: password.value,
    })
    console.log(response)
    if (response.code === 200) {
      // 存储认证信息
      localStorage.setItem('token', response.data)
      localStorage.setItem('role', 'teacher') // 或从响应中获取实际角色
      localStorage.setItem('username', username.value)

      if (rememberMe.value) {
        localStorage.setItem('remember_username', username.value)
      }

      ElMessage({
        message: '登录成功，欢迎回来!',
        type: 'success',
      })

      // 登录成功后重定向到仪表盘
      router.push('/dashboard')
    }
  } catch (err) {
    error.value = '登录失败，请检查用户名和密码'
    console.error(err)
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.login-page {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
}

.login-container {
  width: 45%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  background-color: white;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
}

.login-background {
  flex: 1;
  background: linear-gradient(45deg, #409eff 0%, #53a8ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.illustration {
  width: 90%;
  max-width: 500px;
  animation: float 6s ease-in-out infinite;
}

.illustration img {
  width: 100%;
  height: auto;
}

.login-header {
  margin: 0 auto;
  margin-bottom: 40px;
}

.logo {
  margin: 0 0 20px;
  animation: fadeIn 1s ease-out;
}

.logo img {
  height: 60px;
  width: auto;
}

.welcome-text {
  font-size: 16px;
  color: #606266;
  margin: 0;
  animation: fadeIn 1s ease-out 0.3s both;
}

.login-form-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  animation: slideUp 0.8s ease-out;
}

.login-form {
  margin-bottom: 20px;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.forgot-link {
  color: #409eff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.forgot-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.login-button {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: all 0.3s;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #909399;
  font-size: 14px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #e4e7ed;
}

.login-divider span {
  padding: 0 15px;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}

.social-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.3s;
}

.social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.social-btn.wechat {
  background-color: #07c160;
  color: white;
}

.social-btn.qq {
  background-color: #12b7f5;
  color: white;
}

.social-btn.weibo {
  background-color: #e6162d;
  color: white;
}

.social-icon {
  font-size: 20px;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #606266;
}

.register-link a {
  color: #409eff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.register-link a:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.error-message {
  margin-top: 15px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .login-page {
    flex-direction: column;
  }

  .login-container {
    width: 100%;
    height: 60%;
  }

  .login-background {
    height: 40%;
  }

  .illustration {
    width: 60%;
  }
}

@media (max-width: 768px) {
  .login-container {
    padding: 20px;
  }

  .login-background {
    display: none;
  }

  .login-container {
    height: 100%;
  }
}
</style>
